import React, { ReactElement, useContext } from 'react';
import { View, Text, Image } from 'react-native';

import styles from './style';
import Button from '../../../../components/Button';
import { setCurrentTab, showTabEvent } from '../../actions';
import { Store } from '../../reducer';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { tabs, currentTab } = state;

  return (
    <View>
      <View style={styles.container}>
        {tabs.map(
          (item, index): ReactElement => {
            const selected = item.id === currentTab.id;
            return (
              <Button
                key={item.id}
                text={item.desc}
                style={[
                  styles.tab,
                  index === 0 ? styles.firstTab : {},
                  index === tabs.length - 1 ? styles.lastTab : {}
                ]}
                onPress={(): void => {
                  showTabEvent(item.id);
                  setCurrentTab(item);
                }}
                activity={!selected}
              >
                <View style={styles.loadTab}>
                  <Image
                    source={selected ? item.icon : item.grayIcon}
                    style={[item.iconStyle, styles.icon]}
                    resizeMode="contain"
                  />
                  <Text style={styles.tabDesc}>{item.desc}</Text>
                </View>
              </Button>
            );
          }
        )}
      </View>
      <View style={styles.bottomSafe} />
    </View>
  );
};
